<template>
  <div class="details">
    <div class="info clearfloat">
      <div class="img">
        <img class="imgX" :src="info.image_input" alt />
      </div>
      <div class="info_list">
        <h5>{{ info.title }}</h5>
        <!-- <div
          class="info_type padd05"
          v-for="(item ,index) in staff_array"
          :key="index"
        >{{item.title}}</div> -->
        <div class="info_item">
          <div>オフィス：</div>
          <div><span
            class="padd05"
            v-for="(item, index) in office_array"
            :key="index"
            >{{ item.name }}</span
          ></div>
          
        </div>
        <div class="info_item">
          <div>ビジネス：</div>
          <div> <span
            class="padd05"
            v-for="(item, index) in service_array"
            :key="index"
            >{{ item.title }}</span
          ></div>
         
        </div>
        <div class="info_item">
          <div>電&emsp;&emsp;話：</div>
          <span>{{ info.tel }}</span>
        </div>
        <div class="info_item">
          <span>ファックス：</span>
          <span>{{ info.postcode }}</span>
        </div>
        <div class="info_item">
          <span>Eメール：</span>
          <span>{{ info.email }}</span>
        </div>
      </div>
    </div>
    <div class="return" @click="back">
      <span>返す</span>
      <img src="@/assets/images/return_you.png" alt />
    </div>
    <div class="content" v-html="info.content"></div>
  </div>
</template>
<script>
import { service_cate1 } from "@/api/field.js";
import { office_list } from "@/api/contactUs.js";
import { staff_cate, staff_visit } from "@/api/personnel.js";
import {} from "@/api/personnel.js";
export default {
     name:'personnelDetails',
  data() {
    return {
      info: {},
      staff_cate: [], //职务分类
      staff_array: [],
      office_cate: [], //办公地点
      office_array: [],
      service_cate: [], //业务领域分类
      service_array: []
    };
  },
  mounted() {
   this.getAll();
  },
  methods: {
    async getAll() {
      let state = this.$store.state.headTitle;

      if (state.positionCateJAP.length < 1) {
        //获取职务分类
        staff_cate().then(res => {
          res.data.data.JAP.map(item => {
            item.value = item.id;
            item.label = item.title;
          });
          this.staff_cate = res.data.data.JAP;
          this.$store.commit("changePositionCateJAP", res.data.data.JAP);
        });
      } else {
        let staff_cate = state.positionCateJAP;
        staff_cate.map(item => {
          item.value = item.id;
          item.label = item.title;
        });
        this.staff_cate = staff_cate;
      }

      if (state.placeCateJAP.length < 1) {
        //获取办公地点
        office_list({ field: 1 }).then(res => {
          res.data.data.JAP.map(item => {
            item.value = item.id;
            item.label = item.name;
          });
          this.$store.commit("changePlaceCateJAP", res.data.data.JAP);
          this.office_cate = res.data.data.JAP;
        });
      } else {
        let office_cate = state.placeCateJAP;
        office_cate.map(item => {
          item.value = item.id;
          item.label = item.name;
        });
        this.office_cate = office_cate;
      }

      if (state.businessCateJAP.length < 1) {
        //获取业务领域分类
        service_cate1().then(res => {
          res.data.data.JAP.map(item => {
            item.value = item.id;
            item.label = item.title;
          });
          this.service_cate = res.data.data.JAP;
          this.$store.commit("changeBusinessCateJAP", res.data.data.JAP);
        });
      } else {
        let service_cate = state.businessCateJAP;
        service_cate.map(item => {
          item.value = item.id;
          item.label = item.title;
        });
        this.service_cate = service_cate;
      }
      await this.getInfo();
    },
    getInfo() {
      staff_visit({ id: this.$route.query.id }).then(res => {
          if (this.$isMobile()) {
        res.data.data.content = this.$pxToRem(res.data.data.content);
      } 
        this.info = res.data.data;
        let staff_array = [];
        this.info.cid.split(",").map(item => {
          let current = this.staff_cate.find(i => i.id == item);
          if (current) {
            staff_array.push(current);
          }
        }); //职务
        this.staff_array = staff_array;

        let office_array = [];
        this.info.office_id.split(",").map(item => {
          let current = this.office_cate.find(i => i.id == item);
          if (current) {
            office_array.push(current);
          }
        }); //办公地点
        this.office_array = office_array;

        let service_array = [];
        this.info.service_cid.split(",").map(item => {
          let current = this.service_cate.find(i => i.id == item);
          if (current) {
            service_array.push(current);
          }
        }); //专业领域

        this.service_array = service_array;
      });
    },
    back() {
      this.$router.go(-1); //返回上一层
    }
  }
};
</script>
<style scoped src="./sass/personnel.css"></style>
